;(function () {
  var data = [
    { name: '可爱多', num: '9,086' },
    { name: '娃哈哈', num: '8,341' },
    { name: '喜之郎', num: '7,407' },
    { name: '八喜', num: '6,080' },
    { name: '小洋人', num: '6,724' },
    { name: '好多鱼', num: '2,170' }
  ]
  // 绑定事件
  $('.top').on('mouseenter', '.sup li', function () {
    $(this)
      .addClass('active')
      .siblings()
      .removeClass('active')
    // 动态渲染右侧内容
    // 1. 打乱数据
    var randomData = data.sort(function () {
      return 0.5 - Math.random()
    })
    // 2. 拼接字符串
    var html = ''
    randomData.forEach(function (item) {
      html += `<li><span>${item.name}</span><span>${item.num} <s class="icon-up"></s></span></li>`
    })
    // 3. 渲染内容
    $('.sub').html(html)
  })
  //默认触发一次
  var $lis = $('.top .sup li')
  $lis.eq(0).mouseenter()
  // 开启定时器
  var index = 0
  setInterval(function () {
    index++
    if (index >= 5) {
      index = 0
    }
    $lis.eq(index).mouseenter()
  }, 2000)
})()
